<template>
  <!-- 弹框 -->
  <div>
    <el-dialog :title="title" v-model="show" :width="width" @closed="close" :close-on-click-modal="false">
        <!-- 内容 -->
      <slot name="con"></slot>
      <template #footer>
        <!-- 按钮 -->
        <slot name="foot"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    //显示隐藏
    show: {
      type: Boolean,
      default: false,
    },
    //标题
    title: {
      type: String,
      default: "标题",
    },
    //宽度
    width: {
      type: String,
      default: "50%",
    }
  },
  data() {
    return {};
  },
  methods:{
    // 弹框打开事件
    open(){
      this.$emit("dialogOpen")
    },
    // 弹框关闭事件
    close(){
      this.$store.commit('CHANGEBTNSTATUS', false);
      this.$emit("dialogClose")
    }
  }
};
</script>

<style lang="less" scoped>
:deep(.el-select){
  width: 100%;
}
</style>